<template>
  <div style="height:100%;position:relative;">
    <div :id="id" style="height: 100%" :style="{visibility:data&&data.length>0?'visible':'hidden'}"></div>
    <div v-show="!data||data.length===0" class="no-data">暂无数据</div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "pie-legend",
  props: {
    id: {
      type: String,
      default: "pie-legend",
    },
    color: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.curIndex = 0;
        if (this.chart) {
          this.setOption();
        } else {
          this.initChart();
        }
      },
    },
  },
  data() {
    return {
      chart: null,
      curIndex: 0,
      Timer: 0,
    };
  },
  mounted() {
    this.initChart();
    document.addEventListener("visibilitychange", this.handleVisible);
  },
  beforeDestroy() {
    this.Timer && clearTimeout(this.Timer);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
    document.removeEventListener("visibilitychange", this.handleVisible);
  },
  methods: {
    handleVisible(e) {
      if (e.target.visibilityState === "visible") {
        this.setOption();
      } else {
        this.Timer && clearTimeout(this.Timer);
      }
    },

    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), "macarons");

      this.chart.on("selectchanged", (param) => {
        if (param.fromAction === "select") {
          this.curIndex = param.selected[0].dataIndex[0];
        }
        this.setOption();
      });

      this.setOption();

      window.addEventListener("resize", () => {
        this.chart && this.chart.resize();
      });
    },
    setOption() {
      this.Timer && clearTimeout(this.Timer);
      if (!this.data || Object.keys(this.data).length === 0) {
        return;
      }

      let legendData = this.data.map((item) => {
        return item.name;
      });
      let data = this.data.map((item, index) => {
        return {
          name: item.name,
          value: item.count,
          selected: index === this.curIndex,
        };
      });

      let option = {
        color: this.color,
        tooltip: {
          trigger: "none",
          borderWidth: 0,
          backgroundColor: "rgba(50, 50, 50, 0.7)",
          textStyle: {
            color: "#ffffff",
          },
        },
        legend: {
          orient: "vertical",
          right: 0,
          top: "middle",
          icon: "circle",
          height: 130,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          selectedMode: false,
          textStyle: {
            color: "#82A9EF",
          },
          formatter: (name) => {
            let cur = data.find((item) => {
              return item.name === name;
            });
            return name + ": " + (cur.value || "");
          },
          data: legendData,
        },
        series: [
          {
            type: "pie",
            right: "50%",
            top: 10,
            bottom: 5,
            center: ["50%", "50%"],
            radius: ["50%", "90%"],
            hoverAnimation: false,
            cursor: "default",
            silent: true,
            data: [
              {
                value: 1,
                itemStyle: {
                  color: "rgba(43, 57, 98, 0.6)",
                },
              },
            ],
          },
          {
            type: "pie",
            right: "50%",
            top: 10,
            bottom: 5,
            center: ["50%", "50%"],
            radius: ["70%", "90%"],
            minAngle: 10,
            hoverAnimation: true,
            selectedMode: "single",
            selectedOffset: 5,
            label: {
              show: false,
              position: "center",
              color: "#689FF6",
              formatter: function (params) {
                return ["{number|" + params.value + "}", params.name].join(
                  "\n"
                );
              },
              rich: {
                number: {
                  color: "#ffffff",
                  fontSize: 16,
                  padding: [0, 0, 5, 0],
                },
              },
            },
            select: {
              label: {
                show: true,
              },
            },
            data: data,
          },
        ],
      };

      this.chart.setOption(option, true);

      this.Timer = setTimeout(() => {
        if (this.curIndex < this.data.length - 1) {
          this.curIndex++;
        } else {
          this.curIndex = 0;
        }
        this.setOption();
      }, 2000);
    },
  },
};
</script>

<style lang="less" scoped>
.no-data {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c5c8ce;
}
</style>